// 头部
.M-header {
	height: 50px;
	padding-bottom: 0px;
	background: #fff;
	border-bottom: 1px solid #ececec;
	width: 100%;
	padding-right: 28px;

	&.shadow {
		box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.1);
	}

	&Logo {
		float: left;
		height: 50px;
		line-height: 50px;
		overflow: hidden;
		padding-right: 20px;
		padding-left: 20px;
		width: 160px;
		img {
			margin-top: 9px;
		}
	}

	&Menu {
		float: left;
		height: 50px;
		display: none;
	}

	&Message {
		float: right;
		height: 50px;
	}

	&Language {
		float: right;
		height: 50px;
		// display: none;
	}

	&Setting {
		float: right;
		height: 50px;
	}

	&Account {
		float: right;
		height: 50px;
	}

	&Monitor {
		float: right;
		height: 50px;
	}

	&Question {
		float: right;
		height: 50px;
	}

	&Toolbar {
		float: right;
		height: 50px;
	}

	&SwitchProduct {
		float: right;
		height: 50px;
		margin-right: -28px;
	}
}

// ------------------------------------
// logo
.M-logo {
	text-align: center;
	padding: 10px 0 0px;
	position: relative;

	.smaller {
		display: none;
	}
	.angle {
		position: absolute;
		right: -1px;
		top: 50%;
		margin-top: -8px;
		border-right-color: #fff;
		border-width: 7px;
	}
}

// 消息公告
.M-message {
	float: right;
	position:relative;
	line-height: 50px;
	height: 50px;
	font-size: 14px;
	color: #C0C7CD;
	margin: 0px 10px;

	&BtnCon {
		position: relative;
		cursor: pointer;
		&.act {
			color: #A1A1A1;
		}
		&:hover {
			.ico {
				color: #A1A1A1;
			}
			.count {
				background: #de0d06;
				color: #FFFFFF;
			}
		}
		.ico {
			font-size: 18px;
			vertical-align: middle;
			cursor: pointer;
			&:hover {
				color: #A1A1A1;
			}
		}
		.count {
			position: absolute;
			right: -8px;
			top: 10px;
			min-width: 18px;
			height: 18px;
			line-height: 18px;
			font-size: 12px;
			background: #ce3939;
			color: #FFFFFF;
			text-align: center;
			overflow: hidden;
			border-radius: 50%;
			font-style: normal;
			&:hover {
				background: #de0d06;
			}
			&.more {
				line-height: 10px;
			}

		}
	}

	&Content {
		&Con {
			min-height: 60px;
			.itemCon {
				//height: 60px;
				border-bottom: 1px solid #D7D7D7;
				cursor: pointer;
				&:hover{
					background: #F9F9f9;

				}
				.item {
					>.itemTitle {
						font-weight: bold;
					}
					>.itemIco {
						font-size: 13px;
						padding-right: 5px;
						color: #999;
						vertical-align: 1px;
					}
					display: inline-block;
					width: 235px;
					word-break: break-all;
					padding: 12px 15px;
					&:hover {
						.itemIco {
							color: #07d;
						}
					}
				}
				.ignore {
					display: inline-block;
					//line-height: 60px;
					padding: 12px 0;
					text-align: center;
					width: 55px;
					vertical-align: top;
					span {
						color: #999;
						cursor: pointer;
						&:hover {
							color: #059;
							text-decoration: underline;
						}
					}
				}
			}
			.itemCon:nth-last-child(1) {
				border-bottom: none;
			}
			.empty {
				line-height: 60px;
				text-align: center;
			}
		}
		&CheckBtn {
			width: 100%;
			height: 40px;
			background: #f2f2f2;
			line-height: 40px;
			text-align: center;
			a {

			}
		}
	}
}

// 账号信息
.M-account {
	float: right;
	position:relative;
	line-height: 50px;
	height: 50px;
	font-size: 14px;
	color: #C0C7CD;
	margin: 0px 10px;

	&BtnCon {
		.ico {
			font-size: 18px;
			vertical-align: middle;
			cursor: pointer;
			&:hover {
				color: #A1A1A1;
			}
		}
		&.act {
			color: #A1A1A1;
		}
	}
}

// 用户帮助
.M-question {
	float: right;
	position:relative;
	line-height: 50px;
	height: 50px;
	font-size: 14px;
	color: #C0C7CD;
	margin: 0px 10px;

	&BtnCon {
		.ico {
			font-size: 18px;
			vertical-align: middle;
			cursor: pointer;
			&:hover {
				color: #A1A1A1;
			}
		}
		&.act {
			color: #A1A1A1;
		}
	}
	&List {
		padding: 0;
		margin: 10px 0;
		text-align: center;
		position: relative;

		li {
			font-size: 14px;
			height: 30px;
			line-height: 30px;
			cursor: pointer;

			a {
				color: #a1a1a1;
				display: inline-block;
				width: 100%;
				height: 100%;
				text-align: center;
				&:hover {
					text-decoration: none;
				}
			}
			&:hover {
				background: #F4F4F4;
				a {
					color: #444444;
				}
				.M-questionListSub {
					display: block;
				}
			}
		}

		&Sub {
			display: none;
			position: absolute;
			left: 100px;
			top: -10px;
			background: #fff;
			padding: 10px 0;
			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
			.option {
				font-size: 14px;
				height: 30px;
				line-height: 30px;
				cursor: pointer;
				width: 100px;
				text-indent: 15px;
				color: #a1a1a1;
				text-align: left;
				span {

				}
				i {
					margin-left: 5px;
				}
				&:hover {
					color: #444444;
					background: #F4F4F4;
				}
			}
			>i {
				position: absolute;
				left: -14px;
				top: 15px;
				.icon();
				.icon-triangle-left;
			}
		}
	}
}

// 语言切换
.M-language {

	&BtnCon {
		>div {
			cursor: pointer;
			vertical-align: middle;
			display: inline-block;

			>i{
				display: inline-block;
				vertical-align: 0px;
				width: 16px;
				height: 11px;
				margin-right: 10px;
			}
			>em {
				border-width: 4px;
				margin-left: 5px;
				vertical-align: -2px;
			}
		}
	}

	&List {
		>li {
			>a {
				text-align: left;
				text-indent: 10px;
				>i {
					display: none;
					vertical-align: 0px;
					width: 16px;
					height: 11px;
					margin-right: 10px;
					margin-left: 12px;
				}
			}
		}
	}

	&CN {
		background: url(../images/language/zh-cn.png) no-repeat;
		display: inline-block !important;
	}

	&EN {
		background: url(../images/language/en-us.png) no-repeat;
		display: inline-block !important;
	}

	&HK {
		background: url(../images/language/zh-hk.png) no-repeat;
		display: inline-block !important;
	}

	&TW {
		background: url(../images/language/zh-tw.png) no-repeat;
		display: inline-block !important;
	}
}

// 产品切换
.M-switchProduct {
	padding-left: 20px;
	padding-right: 10px;
	border-left: 1px solid #ececec;

	&List {
		>li {
			>a {
				text-align: left;
				text-indent: 10px;
			}
		}
	}
}

// 用户切换
.M-userToolbar {
	float: right;
	position:relative;
	line-height: 50px;
	height: 50px;
	font-size: 14px;
	color: #C0C7CD;
	margin-left: 10px;

	&Con {
		&Box{
			position:relative;
			min-width: 145px;
			_width: 145px;
			float: right;
			height: 50px;
			line-height: 50px;
			color: #a1a1a1;
			cursor: pointer;
			margin-left: 10px;
			border-left: 1px solid #ececec;
			padding-left: 20px;

			.resultCon {
				float: right;
				height: 50px;

				.email, {
					vertical-align: middle;
					line-height: 50px;
					text-align: right;
					font-size: 14px;
					&.act {
						line-height: 25px !important;
					}
				}
			}

			.btnCon{
				margin-left: 14px;
				float: right;
				height: 50px;
				line-height: 50px;
				font-size: 16px;
				.ico {
					font-size: 19px;
					vertical-align: middle;
				}
				em {
					font-size: 12px;
				}
			}

			&:hover{
				color: #7B7B7B;
			}
			&.act {
				color: #a1a1a1;
			}
		}

		&UserInfo {
			border-bottom: 1px solid #cdcdcd;
		}

		&Amount {
			border-bottom: 1px solid #cdcdcd;
		}

		&Userlist {
			//min-height: 200px;
			width: 100%;
		}

		.changeCon {
			cursor: pointer;
			margin-left: 5px;
			margin-top: 15px;
			height: 35px;
		}
	}
}

// 用户切换-账号信息
.M-userInfoDetail {
	&Con {
		font-size: 14px;
		padding: 10px 20px;
		div.infoCon {
			margin: 0 0 10px 0;
			strong {
				color: #555;
				font-size: 18px;
				line-height: 30px;
			}
			em {
				color: #555;
				font-style: normal;
				margin-left: 20px;
			}
			span {
				padding: 0;
				margin-right: 30px;
			}
			b {
				font-size: 12px;
				margin: 0;
				font-weight: normal;
			}
		}
		div.operateCon {
			min-height: 20px;

			span.logout {
				float: right;
				cursor: pointer;
				i {
					margin-right: 2px;
				}
				&:hover {
					color: #1d6fa5;
				}
			}
			span.goBack {
				float: left;
			}
			ul.opList {
				float: left;
				margin: 0;
				padding: 0;
				display:block;
				overflow:hidden;
				height:1.2em;
				margin-bottom: 10px;
				li {
					display:block;
					float:left;
					height:1.2em;
					padding:0 13px;
					overflow:hidden;
					line-height:1em;
					margin:0 0 0 -1px;
					border-left:1px solid #30aeeb;
					a {
						color: #498fca;
						&:hover {
							color: #3399ff;
						}
					}
				}
				li:nth-child(1) {
					padding:0 13px 0 0;
					border-left: none;
				}
			}
		}


	}
}

// 用户切换-金额信息
.M-userAmountDetail {
	&Con {
		font-size: 14px;
		padding: 10px 20px;
		ul {
			margin: 0;
			padding: 0;
			overflow:hidden;
			li {
				color:#555;
				line-height: 30px;
			}
			p {
				margin: 0 0 0 4px;
				float: none;
				text-align: left;
				display: inline-block;
			}
			span {
				color:#555;
				font-size:16px;
			}
			em {
				color: #555;
				font-style: normal;
			}
			span.red {
				color: #c30;
			}
		}
	}
}

// 用户切换-切换信息
.M-userlistDetail {
	&Con {
		// min-height: 83px;
		.userCon {
			//display: none;
			p.current {
				margin: 0;
				padding: 10px 20px;
				// text-align: center;
				//background: #33aee5;
				//color: #FFFFFF;
				//cursor: pointer;
				font-size: 14px;
				//background: #DDDDDD;

				&.act{
					// background: #ce3939;
					// cursor: default;
				}
				.goBack {
					color: #3498db;
					display: inline-block;
					width: 160px;
					vertical-align: middle;
				}
				.logout {
					cursor: pointer;
					&:hover {
						color: #1d6fa5;
					}
				}
			}
			p.tips, p.tipsLoad {
				text-align: center;
				padding: 10px 20px;
				margin: 0;
				font-size: 14px;
				background: #EEEEEE;
				display: none;
			}
		}
		.searchCon {
			// background: #EEEEEE;
			height: 44px;
			text-align: center;
			line-height: 40px;
			position: relative;
			input {
				width: 90%;
				background: #F7F7F7;
				border-color: #F7F7F7;
				border-radius: 0px;
				&:focus {
					background: none;
					border-color: rgb(156, 213, 245);
				}
			}
			i {
				position: absolute;
				color: #C7C7C7;
				right: 28px;
				top: 15px;
				font-size: 14px;
				cursor: pointer;
				font-style: normal;
				&:hover {
					color: #888;
				}
			}
			i.cancel {
				top: 1px;
				font-size: 20px;
				right: 26px;
			}
			i.do {
				cursor: default;
			}
		}
		.heightClass {height: 300px;}
		.listCon {
			// min-height: 50px;
			max-height: 400px;
			ul{
				margin: 0;
				padding: 0;
				li {
					height: 50px;
					border-top: 1px solid #ececec;
					line-height: 20px;
					padding: 5px 20px;
					font-size: 13px;
					color: #AAAAAA;
					cursor: pointer;
					// padding: 10px;
					font-size: 12px;
					line-height: 18px;
					// font-weight: 600;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					cursor: pointer;
					color: #b1b1b1;
					strong {
						//font-weight: normal;
						color: #555555;
					}
					em {
						font-style: normal;
					}
					&:hover {
						background: #F5F5F5;
					}
				}
				.hoverClass {
					background: #F5F5F5;
				}
				.selectClass {
					display: none!important;
					background: #ce3939;
					color: #FFFFFF;
					cursor: default;
					strong {
						color: #FFFFFF;
					}
					&:hover {
						background: #ce3939;
					}
				}

				li:nth-child(even) {
					//background: #F5F5F5;
				}
			}
		}
		&SitelistIcon {
			.changeIcon {
				color: #a1a1a1;
				font-size: 13px;
				cursor: pointer;
				height: 30px;
				line-height: 30px;
				padding-left: 20px;
				// border-bottom: 1px solid #f3f3f3;
			}
			.changeColor {
				color: #646464;
				background-color: #F4F4F4;
			}
		}
	}
}